<template>
  <view class="container">
    <view class="hidden-title">派发信息</view>
    <uni-forms ref="form" :model="formData" labelWidth="120px" labelPosition="top">
      <cu-cell-group class="bor-top">
        <!-- <uni-forms-item name="transferType" required label="请选择">
          <cu-cell
            title="转办类型"
            required
            link
            placeholder="请选择"
            :description="transferTypeName"
            @click="transferTypeClick()"
          >
          </cu-cell>
        </uni-forms-item> -->
        <uni-forms-item name="deptId">
          <cu-cell title="转办部门" required link placeholder="请选择" :description="deptName" @click="deptClick()">
          </cu-cell>
        </uni-forms-item>
        <uni-forms-item name="userId">
          <cu-cell title="转办人员" required link placeholder="请选择" :description="userName" @click="userClick()">
          </cu-cell>
        </uni-forms-item>
      </cu-cell-group>
    </uni-forms>

    <dept-selector ref="deptDict" @change="deptConfirm"></dept-selector>
    <user-selector ref="userDict" title="转办人员" :dept-id="formData.deptId" @change="userConfirm"> </user-selector>
    <!-- <transfer-type-picker ref="transferPicker" @change="transfetTypeConfirm">
    </transfer-type-picker> -->

    <view class="submit-group">
      <button class="u-button margin-right-xs" type="primary" :ripple="true" @click="distribute">上报</button>
      <button class="u-button-cancel margin-left-xs" type="default" :ripple="true" @click="navigateBack">取消</button>
    </view>
  </view>
</template>

<script>
import { reportToLeader } from '@/api/dbd/hiddenDangerDeal.js'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'
import UserSelector from '@/components/user-selector/index.vue'
import DeptSelector from '@/components/dept-selector/index.vue'
import TransferTypePicker from '@/pages/work/hiddenDangerReport/components/transferTypePicker.vue'
export default {
  name: 'ReportToLeader',
  components: {
    CuRadioGroup,
    CuCell,
    CuCellGroup,
    UserSelector,
    DeptSelector,
    TransferTypePicker
  },
  onLoad(option) {
    this.managerId = option.managerId
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  data() {
    return {
      transferTypeName: '',
      managerId: '',
      deptName: '',
      userName: '',
      formData: {
        deptId: undefined,
        userId: undefined
      },
      listData: [],
      dictData: [
        {
          dictValue: 1,
          dictLabel: '平级转办'
        },
        {
          dictValue: 2,
          dictLabel: '逐级上报'
        }
      ],
      rules: {
        deptId: {
          rules: [
            {
              required: true,
              errorMessage: '转办部门不能为空'
            }
          ]
        },
        userId: {
          rules: [
            {
              required: true,
              errorMessage: '转办人员不能为空'
            }
          ]
        }
      }
    }
  },
  methods: {
    distribute() {
      this.$refs.form.validate().then((res) => {
        this.$modal.confirm('确定上报吗？').then(() => {
          let data = {
            managerId: this.managerId,
            userId: this.formData.userId,
            deptId: this.formData.deptId
          }
          reportToLeader(data).then(() => {
            this.$modal.showToast('上报成功')
            uni.reLaunch({
              url: '/pages/work/index'
            })
          })
        })
      })
    },

    deptClick() {
      this.$refs.deptDict.open()
    },
    deptConfirm(obj) {
      this.formData.userId = undefined
      this.userName = ''
      this.deptName = obj.name
      this.formData.deptId = obj.value
    },
    userClick() {
      if (!this.formData.deptId || this.formData.deptId === '') {
        this.$modal.msgError('请先选择部门')
        return
      }
      this.$refs.userDict.open()
    },
    userConfirm(obj) {
      this.userName = obj.name
      this.formData.userId = obj.value
    },
    transferTypeClick() {
      this.$refs.transferPicker.open()
    },

    onNavigationBarButtonTap(e) {
      uni.navigateTo({
        url: '/pages/work/hiddenDangerReport/components/dangerPreview'
      })
    },
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 200rpx;

  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.submit-group {
  background: #fff;
  z-index: 9;
  padding: 20px;
}

.u-button {
  width: 600rpx;
}

.blue {
  color: #88b4c4;
}

.icon-style {
  width: 52rpx;
  height: 42rpx;
  padding-right: 10rpx;
}

.input {
  display: inline-block;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  height: 60rpx;
}
</style>
